<template>
  <div class="page-box">
    <div class="c-box">
      <div class="left-box">
        <div class="content bg-box" :class="{ expandcontent: !isleftboxShow }">
          <TowerTree @playVideo="playVideo"></TowerTree>
        </div>
        <div class="control" @click="isleftboxShow = !isleftboxShow">
          <img v-show="isleftboxShow" src="/tree/left-sq.png">
          <img v-show="!isleftboxShow" src="/tree/left-zk.png">
        </div>
      </div>

      <div style="width: 10px"></div>
      <div style="flex: 1">
        <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">

          <el-row>
            <el-col :span="20">

              <!--          <el-form-item>-->
              <!--            <TowerElect v-model="state.dataForm.stationId" placeholder="所属杆塔" clearable></TowerElect>-->
              <!--          </el-form-item>-->
              <!--      <el-form-item>-->
              <!--        <ren-select v-model="state.dataForm.level" dict-type="level" placeholder="告警等级"></ren-select>-->
              <!--      </el-form-item>-->

              <el-form-item>
                <ren-select v-model="state.dataForm.picType" dict-type="picture_type" placeholder="图片类型"
                  @change="picTypeChange()" clearable></ren-select>
              </el-form-item>
              <el-form-item v-if="state.dataForm.picType == 'warning'">
                <ren-select v-model="state.dataForm.processingStatus" dict-type="processing_status" placeholder="流程状态"
                  clearable></ren-select>
              </el-form-item>
              <el-form-item>
                <el-date-picker style="width: 100%" v-model="pictureDate" value-format="YYYY-MM-DD HH:mm:ss"
                  type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels
                  :shortcuts="shortcuts"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="screenshotHandle()">抓图</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="scHandles()">批量抓图</el-button>
              </el-form-item>
              <!--      <el-form-item>-->
              <!--        <el-button type="info" @click="state.exportHandle()">{{ $t("export") }}</el-button>-->
              <!--      </el-form-item>-->
              <el-form-item>
                <el-button v-if="state.hasPermission('KxWarningPic:kxwarningpic:delete')" type="danger"
                  @click="state.deleteHandle()">{{ $t("deleteBatch") }}
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <!--              <el-form-item>-->
              <p style="text-align: right;margin: 0">
                <el-radio-group v-model="viewRadio">
                  <el-radio-button label="宫格" value="plaid" />
                  <el-radio-button label="表格" value="table" />
                </el-radio-group>
              </p>
              <!--              </el-form-item>-->
            </el-col>
          </el-row>
        </el-form>
        <el-empty style="height: 70vh" description="暂无数据" v-if="JSON.stringify(state.dataList) === '[]'" />

        <!--        宫格-->
        <el-row :gutter="10" v-if="viewRadio === 'plaid'">
          <el-col :span="4" v-for="(item,index) in state.dataList" :key="index" style="margin-bottom: 10px">
            <div class="lisi-box">
              <div class="deleted-css" @click="state.deleteHandle(item.id)">
                <el-icon>
                  <Delete />
                </el-icon>
              </div>
              <el-image class="imgs" :src="imgurl(item.picUrlMin)" :preview-src-list="[imgurl(item.picUrl)]">
                <template #error>
                  <div class="image-slot">
                    <img style="width: 60%" src="/imgs/imgerr.png">
                  </div>
                </template>
              </el-image>
              <div class="text" @click="addOrUpdateHandle(item, item.picType)">
                <p>所属杆塔：{{ item.stationName }}</p>
                <p>通道预置位：{{ item.channelNo }}-{{ item.presettingNo }}</p>
                <p>上传时间：{{ item.uploadDate }}</p>
                <p>保存时间：{{ item.createDate }}</p>
                <p v-if="item.picType === 'warning'">告警类型：
                  <el-tag style="margin-right: 4px;margin-bottom: 2px" type="warning" size="small" effect="plain"
                    v-for="(item ,index) in warningTypeArr(item.warningType)" :key="index">
                    {{ state.getDictLabel("waring_type", item) }}
                  </el-tag>
                </p>
                <p v-if="item.picType === 'warning'">
                  处理状态：{{ state.getDictLabel("processing_status", item.processingStatus) }}</p>
              </div>

              <div @click="addOrUpdateHandle(item, item.picType)" class="xiaoque"
                v-if="item.picType === 'warning' && item.processingStatus == 'processNotStart'">
                消缺
              </div>
            </div>
          </el-col>
        </el-row>

        <!--        表格-->
        <el-table v-else v-loading="state.dataListLoading" :data="state.dataList" border
          @selection-change="state.dataListSelectionChangeHandle" style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column prop="stationName" label="所属杆塔" header-align="center" align="center"
            min-width="160"></el-table-column>
          <el-table-column prop="picType" label="图片类型" header-align="center" align="center" min-width="100">
            <template v-slot="scope">
              {{ state.getDictLabel("picture_type", scope.row.picType) }}
            </template>
          </el-table-column>
          <el-table-column prop="deptName" label="通道预置位" header-align="center" align="center" min-width="100">
            <template v-slot="scope">
              {{ scope.row.channelNo }}-{{ scope.row.presettingNo }}
            </template>
          </el-table-column>
          <el-table-column prop="uploadDate" label="上传时间" header-align="center" align="center"
            width="170"></el-table-column>
          <el-table-column prop="createDate" label="保存时间" header-align="center" align="center"
            width="170"></el-table-column>
          <el-table-column prop="createDate" label="告警类型" header-align="center" align="center" min-width="240">
            <template v-slot="scope">
              <!--              {{ state.getDictLabel("waring_type", scope.row.createDate) }}-->
              <span v-if="scope.row.picType === 'warning'">
                <el-tag style="margin-right: 4px;margin-bottom: 2px" type="warning" size="small" effect="plain"
                  v-for="(item ,index) in warningTypeArr(scope.row.warningType)" :key="index">
                  {{ state.getDictLabel("waring_type", item) }}
                </el-tag>
              </span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="processingStatus" label="处理状态" header-align="center" align="center" min-width="100">
            <template v-slot="scope">
              <span v-if="scope.row.picType === 'warning'">
                {{ state.getDictLabel("processing_status", scope.row.processingStatus) }}
              </span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
            <template v-slot="scope">
              <el-button v-if="scope.row.picType === 'plan'" type="primary" link
                @click="addOrUpdateHandle(scope.row,scope.row.picType)">详情
              </el-button>
              <el-button v-if="scope.row.picType === 'warning' && scope.row.processingStatus != 'processNotStart'"
                type="danger" link @click="addOrUpdateHandle(scope.row,scope.row.picType)">详情
              </el-button>
              <el-button v-if="scope.row.picType === 'warning' && scope.row.processingStatus == 'processNotStart'"
                type="danger" link @click="addOrUpdateHandle(scope.row,scope.row.picType)">消缺
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="state.dataForm.page" :page-sizes="[12, 24, 50, 100]"
          :page-size="state.dataForm.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"></el-pagination>
      </div>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
    <WarningDataFrom ref="warningdatafrom" @close="close"></WarningDataFrom>
    <PlanDataFrom ref="planDataFrom"></PlanDataFrom>
    <ScreenshotList ref="screenshotlist" @close="close"></ScreenshotList>
    <singleScreenshotList ref="singlescreenshotlist" @close="close"></singleScreenshotList>
  </div>
</template>

<script lang="ts" setup>
  import useView from "@/hooks/useView";
  import { nextTick, reactive, ref, toRefs, watch } from "vue";
  // import WarningDataFrom from "./warningDataFrom.vue";
  import WarningDataFrom from "@/views/flow-warning/warningDataFrom.vue";
  import PlanDataFrom from "./planDataFrom.vue";
  import shortcuts from "@/utils/timeHorizon";
  import app from "@/constants/app";
  import { getToken } from "@/utils/cache";
  import TowerTree from "@/components/towerTree.vue";
  import { tableRowClassName } from "@/utils/tableRowClassName";
  import baseService from "@/service/baseService";
  import { ElMessage } from "element-plus";
  import ScreenshotList from "@/views/KxWarningpic/screenshotList.vue";
  import singleScreenshotList from "@/views/KxWarningpic/singleScreenshotList.vue";

  const view = reactive({
    getDataListURL: "/KxWarningPic/kxwarningpic/page",
    getDataListIsPage: true,
    dataListLoading: true,
    exportURL: "/KxWarningPic/kxwarningpic/export",
    deleteURL: "/KxWarningPic/kxwarningpic",
    deleteIsBatch: true,
    dataForm: {
      page: 1,
      limit: 12,
      stationId: null,
      deptId: null,
      level: null,
      startTime: "",
      endTime: "",
      picType: "",
      processingStatus: ""
    },

    // isleftboxShow: true
  });

  const viewRadio = ref("plaid")

  const state = reactive({ ...useView(view), ...toRefs(view) });
  const isleftboxShow = ref(true)

  const pictureDate = ref([] as any)

  watch(pictureDate, (val) => {
    console.log(val)
    if (val === null) {
      state.dataForm.startTime = "";
      state.dataForm.endTime = "";
    } else {
      state.dataForm.startTime = val[0];
      state.dataForm.endTime = val[1];
    }
  }, { deep: true })

  const warningdatafrom = ref();

  const planDataFrom = ref();

  const close = () => {
    state.getDataList();
  }

  const singlescreenshotlist = ref();
  const screenshotHandle = () => {
    if (state.dataForm.stationId == "" || state.dataForm.stationId == null) {
      return ElMessage.warning("请选择杆塔！");
    }
    singlescreenshotlist.value.init(state.dataForm.stationId);

    // baseService.post(`/KxWarningPic/kxwarningpic/sendCmdTakePhone`, [state.dataForm.stationId]).then((res) => {
    //   if (res.code !== 0) {
    //     return ElMessage.error(res.msg);
    //   }
    //   ElMessage.success("命令下发成功，请稍后刷新列表！");
    //   state.getDataList();
    // });
  }


  const screenshotlist = ref();
  const scHandles = () => {
    screenshotlist.value.init();
  }

  const addOrUpdateHandle = (data ?: any, picType ?: string) => {
    nextTick(() => {
      if (picType === "warning") {
        warningdatafrom.value.init(data, "processNotStart");
      } else {
        planDataFrom.value.init(data.id);
      }
    });
  };

  const picTypeChange = () => {
    if (state.dataForm.picType !== "processNotStart") {
      state.dataForm.processingStatus = "";
    }
  }

  // 分页, 每页条数
  const pageSizeChangeHandle = (val : number) => {
    state.dataForm.page = 1;
    state.dataForm.limit = val;
    state.getDataList();
  };
  // 分页, 当前页
  const pageCurrentChangeHandle = (val : number) => {
    state.dataForm.page = val;
    state.getDataList();
  };

  const playVideo = (data : any) => {
    state.dataForm.deptId = null;
    state.dataForm.stationId = null;
    // console.log(data);
    if (data.type === "dept") {
      state.dataForm.deptId = data.id;
    } else {
      state.dataForm.stationId = data.id;
    }
    state.getDataList();
  }

  const warningTypeArr = (data : any) => {
    return data.split(",");
  }

  const imgurl = (url : any) => {
    return `${app.api}/KxWarningPic/kxwarningpic/getImage?token=${getToken()}&filePath=` + url;
  }
</script>

<style lang="scss" scoped>
  .c-box {
    height: 86vh;
    display: flex;

    .bg-box {
      background-image: url(@/views/bigScreen/imgs/screen_bg_1.png);
      background-size: 100% 100%;
      border-radius: 6px;
    }

    .left-box {
      height: 100%;
      display: flex;
      align-items: center;
      z-index: 999;

      .nav-box {
        display: flex;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        align-items: center;
        justify-content: space-around;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150px;
          height: 46px;
          cursor: pointer;
        }
      }

      .navboxxz {
        background-image: url("/videox/nav-xz.png");
        background-size: 100% 100%;
      }

      .expandcontent {
        height: 100%;
        width: 0;
        overflow: auto;
        transition: width ease-out 0.2s;
      }
    }

    .content {
      height: 100%;
      width: 260px;
      overflow: auto;
      transition: width ease-in 0.2s;
    }

    .control {
      height: 120px;
      width: 22px;
      cursor: pointer;
      text-align: center;

      img {
        width: 100%;
        height: 100%;
      }
    }

  }

  .deleted-css {
    position: absolute;
    z-index: 9;
    top: 2px;
    right: 2px;
    font-size: 14px;
    color: rgba(252, 252, 252, 0.94);
    cursor: pointer;
    background-color: #F56C6C;
    border-radius: 50%;
    padding: 4px;
    display: none;
  }

  .lisi-box:hover .deleted-css {
    display: block;
  }

  .image-slot {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lisi-box {
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 350px;
    background: #0D1B2B;
    box-shadow: 0px 1px 6px 0px rgba(74, 127, 191, 0.41);
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
    border: 2px solid #00C4FF;
    //border-image: linear-gradient(134deg, #00C4FF, #0A3D64, #00C4FF, #0A3D64) 2 2;

    .xiaoque {

      position: absolute;
      bottom: 2px;
      right: 2px;
      color: #FFFFFF;
      padding: 2px 6px;
      border: 1px solid #17b4d7;
      border-radius: 4px;
    }

    .imgs {
      width: 100%;
      height: 174px;
      cursor: pointer;
      background: #0E2743;
      border-radius: 6px 6px 0 0;
    }

    .text {
      padding: 10px;
      color: #FFFFFF;

      p {
        margin: 5px 0;
      }
    }

  }
</style>
